<template>
  <view class="score-container">
    <navbar title="本次考试成绩"></navbar>

    <!--#ifndef MP-->
    <view class="nav-right" :style="{top: topBar.statusBarHeight+'px', height: topBar.navbarHeight+'px'}"
          @click="toReportCard">成绩单
    </view>
    <!--#endif-->

    <!--#ifdef MP-->
    <view class="report-card" @click="toReportCard">成绩单
      <image src="@/static/haoyoukankan.png"
             style="width: 10upx;height: 16upx;margin-left: 10upx;margin-right: 11upx"
      />
    </view>
    <!--#endif-->

    <view class="top-gb">
      <image src="http://down.qwdata.vip/app_icon/1705842137307" v-if="success" style="height: 86upx;margin-top: 75upx"
             mode="heightFix"></image>
      <image src="http://down.qwdata.vip/app_icon/1705842131638" v-else style="height: 86upx;margin-top: 75upx"
             mode="widthFix"></image>
      <text class="account-name" :style="{top:(topBar.statusBarHeight+topBar.navbarHeight)+'px'}">
        科目{{ kemu === '1' ? '一' : '四' }}考试成绩单
      </text>

      <image src="http://down.qwdata.vip/app_icon/1703008050552" v-if="success" class="score-icon"
             :style="{top:(topBar.statusBarHeight+topBar.navbarHeight)+'px'}" mode="widthFix"></image>
      <image src="http://down.qwdata.vip/app_icon/1703008045035" v-else class="score-icon"
             :style="{top:(topBar.statusBarHeight+topBar.navbarHeight)+'px'}" mode="widthFix"></image>


      <view class="item-container" style="margin-top: 120upx">
        <text class="item-title">考生姓名</text>
        <text class="item-value">{{ isLogined ? mine.name : '未登录' }}</text>
      </view>

      <view class="item-container">
        <text class="item-title">考试科目</text>
        <text class="item-value">科目{{ kemu === '1' ? '一' : '四' }}</text>
      </view>

      <view class="item-container">
        <text class="item-title">考试日期</text>
        <text class="item-value">{{ date }}</text>
      </view>

      <view class="item-container">
        <text class="item-title">考试用时</text>
        <text class="item-value">{{ timeStr }}</text>
      </view>

      <view class="item-container">
        <text class="item-title">考试成绩</text>
        <text class="item-value">{{ score + '分' }}</text>
      </view>

      <view class="item-container">
        <text class="item-title">考试地点</text>
        <text class="item-value">{{ appName }}</text>
      </view>
    </view>

    <view style="display: flex;flex-direction: row;justify-content: center;margin-top: 50upx">
      <view class="bottom-button" @click="toWrong">
        <text>{{ '查看错题(' + errorNum + ')' }}</text>
      </view>

      <view class="bottom-button" style="margin-left: 38upx" @click="reExam">
        <text>重新考试</text>
      </view>
    </view>
    <ADInterstitial ref="ADInterstitial"></ADInterstitial>
    <TiyanDialog :bottom="true"></TiyanDialog>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex';
import Navbar from "../../components/navbar";
import day from "@/vendor/day";
import ADInterstitial from "@/components/ADInterstitial.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {TiyanDialog, Navbar, ADInterstitial},
  data() {
    return {
      problemNum: 0,
      errorNum: 0,
      kemu: '1',
      timeStr: '',
      date: '',
      shareDate: '',
      painterImg: '',
      qrCodeImg: ''
    }
  },
  computed: {
    ...mapGetters('question', ['kemu1', 'kemu4']),
    ...mapGetters(['mine', 'isLogined', 'appName', 'topBar']),
    kaoshiCount() {
      return this.kemu1.kaoshiCount + this.kemu4.kaoshiCount
    },
    score() {
      if (this.kemu === '1') {
        return this.problemNum - this.errorNum
      }

      return (this.problemNum - this.errorNum) * 2
    },
    success() {
      return this.score >= 90
    }
  },
  async onLoad({type, time, kemu = '1', problemNum, errorNum,}) {
    this.kemu = kemu
    this.problemNum = parseInt(problemNum)

    this.date = day().format('YYYY年MM月DD日')
    this.shareDate = day().format('YYYY/MM/DD')

    this.errorNum = parseInt(errorNum)
    this.timeStr = day().hour(0).minute(0).second(time).format('HH:mm:ss')
    await this.kaoshiSubmit({
      type,
      score: this.score,
      status: this.success ? 1 : 0,
      time,
      kemu,
      zhengque: this.problemNum - this.errorNum,
      cuowu: this.errorNum
    })

    this.$nextTick(() => {
      this.$refs.ADInterstitial.tryOpen()
    })
  },

  onReady() {
  },
  methods: {
    ...mapActions('question', ['kaoshiSubmit']),
    reExam() {
      uni.redirectTo({
        url: '/pages/exam_start/exam_start?kemu=' + this.kemu
      });
    },
    toWrong() {
      uni.navigateTo({
        url: '/pages/mine_wrong/mine_wrong?kemu=' + this.kemu
      });
    },
    toReportCard() {
      uni.navigateTo({
        url: '/pages/exam_result/exam_result?kemu=' + this.kemu
      });
    },
  }
}
</script>

<style lang="scss">
.score-container {
  display: flex;
  flex-direction: column;

  .nav-right {
    display: flex;
    align-items: center;
    right: 36upx;
    position: fixed;
    font-size: 28upx;
    color: #000000;
    font-weight: 400;
    z-index: 100;

  }

  .top-gb {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 750upx;
    height: 1000upx;
    background-image: url("@/static/score_bg.png");
    background-size: cover;
    background-color: #3274f6;

    .account-name {
      position: absolute;
      margin-top: 189upx;
      font-size: 34upx;
      color: white;
      font-weight: 500;
    }

    .score-icon {
      position: absolute;
      height: 274upx;
      width: 236upx;
      right: 61upx;
      margin-top: 590upx;
    }

    .top-bg-img {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .item-container {
      display: flex;
      height: 102upx;
      width: 562upx;
      align-items: center;

      .item-title {
        width: 186upx;
        font-size: 30upx;
        color: #111740;
        text-align: center;
      }

      .item-value {
        flex: 1;
        margin-left: 53upx;
        font-size: 30upx;
        color: #111740;
      }
    }

  }

  .bottom-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 308upx;
    height: 112upx;
    border-radius: 56upx;
    background-color: #ececec;
    color: #000000;
    font-size: 30upx;
    font-weight: 400;
  }

  .report-card {
    position: fixed;
    right: 0;
    bottom: 190upx;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 158upx;
    height: 64upx;
    background: #0A0A0A;
    border-radius: 38px 0px 0px 38px;
    opacity: 0.8;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 28upx;
  }

}


</style>
